import JsonPlaceholderComponent from './JsonPlaceholderComponent.vue'
import { Node } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-3'

export default Node.create({
  name: 'jsonPlaceholder',

  group: 'inline',

  inline: true,

  selectable: true,

  draggable: true,

  addOptions() {
    return {
      HTMLAttributes: {
        class: 'json-placeholder',
      },
    }
  },

  addAttributes() {
    return {
      key: {
        default: null,
        parseHTML: (element) => element.getAttribute('data-key'),
        renderHTML: (attributes) => ({
          'data-key': attributes.key,
        }),
      },
    }
  },

  parseHTML() {
    return [
      {
        tag: 'span[data-key]',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['span', HTMLAttributes, `${HTMLAttributes.key}`]
  },

  addNodeView() {
    return VueNodeViewRenderer(JsonPlaceholderComponent)
  },

  addCommands() {
    return {
      insertJsonPlaceholder:
        (key) =>
        ({ commands }) => {
          return commands.insertContent({
            type: this.name,
            attrs: { key, style: 'background-color: #f0f0f0' },
          })
        },
    }
  },
})
